<script setup lang="ts">
import CardPage from './CardPage.vue';
const props = defineProps(["title", "summay", "productList"]);
</script>

<template>
  <div>
    <!-- 标题*描述 -->
    <div class="flex items-start">
      <img
        class="w-5 h-5"
        src="https://front.cdn.xdclass.net/images/icon_hot.webp"

      />
      <span class="text-3 ml-1">{{ props.title }}</span>

      <div class="ml-10 flex items-center justify-center text-3 mr-9 pt-1">
        {{ props.summay }}
      </div>
    </div>

    <!-- 课程产品列表 -->
    <div class="flex items-center">
      <div class="mt-3 flex gap-5">
        <CardPage v-for="(item, index) in props.productList" :key="index" :card="item" />
      </div>
    </div>
  </div>
</template>

<!-- CardContainer.vue -->
<style scoped>
.flex {
  display: flex;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.w-5 {
  width: 1.25rem;
}
.h-5 {
  height: 1.25rem;
}
.text-3 {
  font-size: 0.75rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-10 {
  margin-left: 2.5rem;
}
.mr-9 {
  margin-right: 2.25rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.gap-5 {
  gap: 1.25rem;
}
</style>
